<template>
  <div>
    <el-form :inline="true" :model="tableForm">
      <el-form-item label="姓名" prop="cn">
        <el-input v-model="tableForm.selectSearch"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="tableForm.phone"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="tableForm.email"/>
      </el-form-item>
      <el-form-item label="部门" prop="depart">
        <el-input v-model="tableForm.depart"/>
      </el-form-item>
      <el-form-item label="员工类型" prop="employeeType">
        <el-select v-model="tableForm.employeeType">
          <el-option v-for="o in employeeType" :key="o.key" :label="o.label" :value="o.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="禁用状态" prop="isDisable">
        <el-select v-model="tableForm.isDisable">
          <el-option v-for="o in disableType" :key="o.key" :label="o.label" :value="o.value"/>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="page()"> 查询</el-button>
      <el-button @click="resetPageRequestBody()"> 重置</el-button>
    </el-form>

    <el-button type="primary" @click="openUpdateDialog(null)">
      添加
    </el-button>
    <el-table :data="tableList" border>
      <el-table-column prop="cn" label="姓名" min-width="80"/>
      <el-table-column prop="phone" label="手机号" min-width="120"/>
      <el-table-column prop="email" label="邮箱" min-width="200"/>
      <el-table-column prop="depart" label="部门" min-width="120"/>
      <el-table-column prop="employeeType" label="员工类型" min-width="80">
        <template v-slot="scope">
          <template v-if="scope.row.employeeType==='zy'">
            自有员工
          </template>
          <template v-if="scope.row.employeeType==='wb'">
            外包员工
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="userPermissions" label="用户权限" min-width="300">
        <template v-slot="scope">
          <span v-for="auth in scope.row.userPermissions" :key="auth">
            <el-tag size="mini" type="info">
              {{ auth }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="禁用状态" prop="isDisable" min-width="80">
        <template v-slot="scope">
          {{ scope.row.isDisable === 1 ? '禁用' : '启用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="openUpdateDialog(scope.row.id)"> 编辑</el-button>
          <el-button type="text" size="small" @click="deleteUser(scope.row.id)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageForm.current" :total="pageForm.total" :page-size="pageForm.size"
      :page-sizes="pageForm.sizes"
      :style="pageForm.style" :layout="pageForm.layout"
      @current-change="page" @size-change="changeSize"
    />
    <update-dialog :id="currentUserId" ref="authDialog" :visible="updateDialogVisible"/>
  </div>
</template>
<script>
import {_delete, page} from '@/api/system/user'
import UpdateDialog from "@/views/system/user/updateDialog";
import {createPageRequestBody} from "@/api/system/pagination";

export default {
  name: "Index",
  components: {UpdateDialog},

  data() {
    return {
      auths: [],
      tableForm: {},
      pageForm: createPageRequestBody(),
      tableList: [],
      updateDialogVisible: false,
      currentUserId: null,
      employeeType: [{value: 'zy', label: '自有员工'}, {value: 'wb', label: '外包员工'}, {
        value: 'gj',
        label: '告警用户'
      }],
      disableType: [{value: 0, label: '启用'}, {value: 1, label: '禁用'}],
    }
  },

  mounted() {
    this.page()
  },

  methods: {
    deleteUser(id) {
      _delete(id).then(() => {
        this.$message({ type: 'success', message: '删除用户成功' })
        this.page()
      })
    },

    page(current = 1) {
      this.pageForm.current = current
      page(this.tableForm, this.pageForm.current, this.pageForm.size, 'AND').then(res => {
        this.tableList = res.data.records
        this.pageForm.total = res.data.total
      })
    },
    changeSize(size) {
      this.pageForm.size = size
      this.page(1)
    },
    resetPageRequestBody() {
      this.tableForm = {}
      this.pageForm = createPageRequestBody()
      this.page()
    },

    openUpdateDialog(id) {
      this.currentUserId = id
      this.updateDialogVisible = true
    },
    closeDialog() {
      this.updateDialogVisible = false
      this.page()
    },
  }
}
</script>

<style scoped>

</style>
